<template>
  <a-modal
    :width="1000"
    v-model:visible="modalVisible"
    @ok="handleOk"
    @cancel="handleCancel"
  >
    <template #title> 创建发货单 </template>
    <div>
      <!-- <TableTurn :table-data="getData" :args="args" ref="tableRef"> </TableTurn> -->

      <a-table
        :stripe="true"
        :dordered="{
          headerCell: true,
        }"
        :data="form.list.warehouseInvoiceItem"
        :scroll="scroll"
        :pagination="false"
      >
        <template #columns>
          <a-table-column :width="80" align="center">
            <template #title> 序号 </template>
            <template #cell="{ rowIndex }">
              {{ rowIndex + 1 }}
            </template>
          </a-table-column>
          <a-table-column
            :width="80"
            title="产品编号"
            data-index="productNumber"
            align="center"
          >
          </a-table-column>
          <a-table-column
            :width="80"
            title="产品名称"
            data-index="productName"
            align="center"
          >
          </a-table-column>
          <a-table-column
            :width="80"
            title="产品规格"
            data-index="spec"
            align="center"
          >
          </a-table-column>
          <a-table-column
            :width="80"
            title="已发货数量"
            data-index="invoicedAmount"
            align="center"
          >
          </a-table-column>
          <a-table-column
            :width="80"
            title="本次发货数量"
            data-index="invoiceAmount"
            align="center"
          >
            <template #cell="{ record }">
              <a-input-number
                :min="1"
                :max="record.itemAmount - record.invoicedAmount"
                v-model="record.amount"
              />
            </template>
          </a-table-column>
        </template>
      </a-table>
    </div>
  </a-modal>
</template>

<script lang="ts" setup>
  import { reactive, computed, ref, watchEffect, nextTick } from 'vue';
  import {
    getInvoiceOne,
    postInvoice,
  } from '@/api/inventory-management/outbound-management/sales-shipment-outbound/sales-outbound/index';
  import { postOutsourcingInvoice } from '@/api/inventory-management/outbound-management/sales-shipment-outbound/sales-outbound/index';
  import {
    getOutsourcingAll,
    delOutsourcingOne,
    confirmOutsourcingOne,
    getOutsourcingOne,
  } from '@/api/produce-management/production-operation/index';

  const tableRef = ref();
  const OutboundVisible = ref(false);
  const OccupiedInfo = ref({});
  const props = withDefaults(
    defineProps<{
      id: number;
      visible: boolean;
      outsourcingId: number;
    }>(),
    {
      visible: false,
    }
  );

  const form = reactive<any>({
    list: {
      warehouseInvoiceItem: [],
      outsourcingId: null,
      outboundId: null,
      state: 1,
      invoiceType: 2,
    },
  });

  // 表格配置
  const args = reactive({
    stripe: true,
    bordered: {
      headerCell: true,
    },
    pagination: false,
    rowKey: 'id', // 批量选择按钮以客户名称来作为key
  });

  const emit = defineEmits(['update:visible', 'processesInvoiceEdit']);
  const data = ref();
  const getData = async (page?: any) => {
    try {
      const res = await Promise.all([
        getInvoiceOne({ id: props.id }),
        getOutsourcingOne({ id: props.outsourcingId }),
      ]);
      form.list.outsourcingId = props.outsourcingId;
      form.list.outboundId = props.id;
      form.list.warehouseInvoiceItem = res[0];
      if (res[1].managementId) {
        form.list.warehouseInvoiceItem.push({
          productName: res[1].managementName,
          productNumber: res[1].managementNumber,
          amount: res[1].amount,
          spec: res[1].spec,
          state: 1,
          managementId: res[1].managementId,
        });
      }
      form.list.warehouseInvoiceItem = form.list.warehouseInvoiceItem.map(
        (item: any) => {
          return {
            itemAmount: item.itemAmount,
            invoicedAmount: item.invoicedAmount || null,
            state: 1,
            outboundItemId: item.id || null,
            productName: item.productName,
            productNumber: item.productNumber,
            spec: item.spec,
            managementId: item.managementId,
            orderProductId: props.outsourcingId,
            amount: 0,
          };
        }
      );
    } catch (err: unknown) {
      console.log(err);
    }
  };
  getData();

  const putOccupied = (val: any) => {
    OccupiedInfo.value = val;
    OutboundVisible.value = true;
  };

  // 判断用户是否显示弹出框
  const modalVisible = computed({
    get() {
      return props.visible;
    },
    set(visible: boolean) {
      emit('update:visible', visible);
    },
  });

  // 取消
  const handleCancel = () => {
    modalVisible.value = false;
  };

  const handleOk = async () => {
    form.list.warehouseInvoiceItem = form.list.warehouseInvoiceItem.filter(
      (item: any) => item.amount
    );
    emit('processesInvoiceEdit', form.list);
    modalVisible.value = false;
  };
</script>

<style scoped lang="less">
  .demo-basic {
    margin-top: 5px;
    width: 500px;
    // margin: auto;
    background-color: aliceblue;
  }
</style>
